<template>
  <div>
    <Navbar>
      <div slot="left" class="back">
          <img src="@/assets/img/back.png" @click="backClick">
      </div>
      <div slot="center" class="title">
        <div 
            v-for="(item, index) in title" 
            :key="index" class="title-item" 
            :class="{active : index === Myindex}" 
            @click="titleClick(index)"
            > 
            {{item}} 
            </div>
      </div>
    </Navbar>
  </div>
</template>

<script>
import Navbar from '@/components/content/navbar/'
export default {
  name: 'classifyNavBar',
  components: {
    Navbar
  },
  data() {
    return {
      title: ['商品', '参数', '评论', '推荐'],
      Myindex:0
    }
  },
  methods: {
      titleClick (index){
        this.Myindex = index
        this.$emit('titleClick',index)
      },
      backClick (){
          this.$router.back()
      }
  }
}
</script>
<style scoped>
.title {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 13px;
    color: black;
}
.back {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.back>img{
    width: 36%;
    height: 36%;
}
.active {
    color: pink;
}
</style>
